<script setup lang="ts">
import { ref, reactive, watch, watchEffect, } from 'vue';
import WangEditor from "#/components/editor.vue"
import { ElButton, ElUpload } from 'element-plus';
import { $t } from '@vben/locales';

defineOptions({ name: 'EditorUpload' })
const emits = defineEmits(['update:modelValue', 'stemFiles']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  file: {
    type: {
      file: String,
      path: String
    } as any,
    defautl: {}
  }
})
const stemFiles = reactive({
  file: '',
  path: ''
})

watchEffect(() => {
  if (props.file && props.file.file) {
    let { file = '', path = '' } = props.file
    stemFiles.file = file
    stemFiles.path = path
  }
})

const content = ref(props.modelValue)
//上传图片
const handleUpload: any = (options: any) => {
  const { file } = options
  stemFiles.file = file
  stemFiles.path = file.name
  emits('stemFiles', options)
}
const delImg = (fileItem: any) => {
  fileItem.path = ''
  fileItem.file = ''
}

watch(() => content.value, (n, o) => {
  emits('update:modelValue', n)
})

</script>
<template>
  <div class="flex h-full items-center w-[100%] mb-[6px] editor-upload">
    <WangEditor v-model="content" class="w-[100%]"></WangEditor>
    <div class="flex flex-col items-end">
      <el-upload action="#" :http-request="handleUpload" accept="image/*" :auto-upload="true" :show-file-list="false" class="ml-[6px]">
        <el-button type="primary" plain class="w-[84px]">{{ $t('questionBank.uploadImage') }}</el-button>
      </el-upload> 
      <el-button type="danger" plain v-if="stemFiles.path" class="mt-[8px] w-[84px]" @click="delImg(stemFiles)">{{ $t('questionBank.deleteImage') }}</el-button>
      <div style="position: absolute;bottom: -25px;">{{ stemFiles.path }}</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.el-form-item.is-error .editor-upload {
  border-color: #f56c6c;
  border-width: 1px;
  border-radius: var(--el-border-radius-base);
}
</style>
